<template>
  <div class="memberInfo-container">
    <div class="default-div"
         v-show="infoData.length==0?true:false">暂无构件详情数据,请返回重新选择</div>
    <div v-show="infoData.length==0?false:true">
      <el-row>
        <el-col :span="24">
          <div class="member-top-title">{{sizeName}}</div>
        </el-col>
        <el-col :span="24">
          <el-form :model="ruleForm"
                   status-icon
                   :rules="rules"
                   ref="ruleForm"
                   label-width="120px"
                   class="demo-ruleForm">
            <el-row class="member-row"
                    v-for="(item,index) in sizeList"
                    :key="index">
              <el-col :span="24">
                <el-form-item :label="item.para_name"
                              prop="pass">
                  <el-input disabled
                            type="text"
                            v-model="item.value.length==0?''+item.unit:item.value[0]+item.unit"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="member-top-title">{{trussName}}</div>
        </el-col>
        <el-col :span="24">
          <div>
            <div>
              <div class="table-div"
                   v-for='(item,index) in trussList'
                   :key="index">{{item.para_name}}
                <p class="table-p"
                   v-for='(sonItem,i) in item.value'
                   :key="i">
                  <span :class="sonItem==''?'air-span':'value-span'">{{sonItem}}</span>
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="member-top-title">{{paramsName}}</div>
        </el-col>
        <el-col :span="24">
          <div>
            <div>
              <div class="table-div"
                   v-for='(item,index) in paramsList'
                   :key="index">{{item.para_name}}
                <p class="table-p"
                   v-for='(sonItem,i) in item.value'
                   :key="i">
                  <span :class="sonItem==''?'air-span':'value-span'">{{sonItem}}</span>
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="member-top-title">{{annexName}}</div>
        </el-col>
        <el-col :span="24">
          <div>
            <div>
              <div class="table-div"
                   v-for='(item,index) in annexList'
                   :key="index">{{item.para_name}}
                <p class="table-p"
                   v-for='(sonItem,i) in item.value'
                   :key="i">
                  <span :class="sonItem==''?'air-span':'value-span'">{{sonItem}}</span>
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { projectDecomApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      sizeList: [],
      trussList: [],
      paramsList: [],
      annexList: [],
      paramsName: "",
      sizeName: "",
      trussName: "",
      annexName: "",
      ruleForm: {
      },
      infoData: [],
      rules: {
      },
    }
  },
  methods: {
    getMemberInfo () {
      projectDecomApi.getMemberDetail({
        params: {
          component_id: this.$route.query.id
        }
      }).then(res => {
        this.infoData = res.data
        if (res.data.length != 0) {
          this.sizeList = res.data[0].paradefData
          this.sizeName = this.sizeList[0].para_sortname
          this.trussList = res.data[1].paradefData
          this.trussName = this.trussList[0].para_sortname
          this.paramsList = res.data[2].paradefData
          this.paramsName = this.paramsList[0].para_sortname
          this.annexList = res.data[3].paradefData
          this.annexName = this.annexList[0].para_sortname
        }

      })
    }
  },
  created () {
    this.getMemberInfo()
  },
  mounted () { }
}
</script>

<style lang="scss" scoped>
.memberInfo-container {
  padding: 0 20px;
  .default-div {
    padding: 20px 0;
    font-size: 24px;
  }
  .member-top-title {
    font-size: 18px;
    padding: 20px 0px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .member-row {
    width: 50%;
    float: left;
  }
  .table-div:nth-of-type(1) {
    border-left: 1px solid #000;
  }
  .table-div {
    float: left;
    width: 100px;
    border: 1px solid #000;
    border-left: 0px;
    text-align: center;
    line-height: 40px;
  }
  .table-p {
    border-top: 1px solid #000;
  }
  .air-span {
    line-height: 40px;
    display: block;
    height: 40px;
  }
}
</style>
